<template>
  <el-card class="box-card" style="height: 850px">
    <!-- 导航 -->
    <!--<el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>话术管理</el-breadcrumb-item>
        </el-breadcrumb>-->

    <!--        <el-card class="box-card">-->
    <!-- 选项卡 -->
    <el-tabs v-model="activeName" @tab-click="paneEdit">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="(item, index) in activeValue"
        :key="index"
      >
        <!-- 按钮 -->
        <div>
          <el-button icon="el-icon-plus" type="primary" @click="handleEdit"
            >新建话术</el-button
          >
          <!--<el-button @click="importShow">导入话术</el-button>-->
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--        </el-card>-->

    <div class="interspaceH"></div>
    <!--列表-->
    <el-row>
      <el-col :span="5">
        <el-card class="box-card" style="width: 220px; height: 650px">
          <el-link icon="el-icon-plus" @click="createGroup()">添加分组</el-link>
          <!--<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
                    </el-tree>-->
          <el-tree
            :data="data"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ node, data }"
              @mouseover="data.show = true"
              @mouseleave="data.show = false"
            >
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  v-if="data.show"
                  type="text"
                  size="mini"
                  @click="() => removeGroup(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>

      <el-col :span="19">
        <el-card class="box-card" style="width: 100%; height: 650px">
          <div v-show="showData">
            <el-table size="small" :data="listData" style="width: 100%">
              <el-table-column align="center" type="selection" width="60">
              </el-table-column>
              <el-table-column
                prop="conversationTitle"
                label="话术标题"
                width="200"
              >
              </el-table-column>
              <!--<el-table-column v-if="conversationType != '链接'" prop="conversationMassage" label="话术内容" width="300">
                                <template slot-scope="scope">
                                    <el-image style="width: 100px;height: 100px" v-if="scope.row.conversationType == '图片'" :src="scope.row.conversationMassage" class="avatar"></el-image>
                                    <el-image style="width: 100px;height: 100px" v-if="scope.row.conversationType == '文件'" :src="require('@/assets/img/Pdf.png')" class="avatar"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="conversationType == '链接'" prop="linkAddress" label="链接地址" width="100">
                            </el-table-column>
                            <el-table-column v-if="conversationType == '链接'" prop="linkTitle" label="链接标题" width="100">
                            </el-table-column>
                            <el-table-column v-if="conversationType == '链接'" prop="linkContent" label="链接内容" width="100">
                            </el-table-column>-->
              <el-table-column
                prop="conversationType"
                label="附件类型"
                width="200"
              >
              </el-table-column>
              <el-table-column
                prop="conversationStatus"
                label="审核状态"
                width="200"
              >
              </el-table-column>
              <el-table-column align="center" label="操作" min-width="150">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="xiangqing(scope.$index, scope.row)"
                    >详情</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="bianji(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="shanchu(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="queryDataHandle(pagePagination.currentPage, $event)"
              @current-change="queryDataHandle($event, pagePagination.pageSize)"
              :current-page="pagePagination.currentPage"
              :page-sizes="pagePagination.pageSizes"
              :page-size="pagePagination.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="pagePagination.total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 导入话术 -->
    <el-dialog
      title="导入话术"
      width="30%"
      :visible.sync="importFormVisible"
      @click="importClose"
    >
      <div>1.下载导入模板，案中案模板填写内容</div>
      <div>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
      <div>2.上传文件</div>
      <div>
        <el-button size="mini" type="primary" @click="">点击上传文件</el-button>
      </div>
    </el-dialog>

    <!-- 添加分组 -->
    <el-dialog
      title="新建分组"
      :visible.sync="formVisible"
      width="30%"
      @click="close"
      :close-on-click-modal="false"
    >
      <!--<div style="background: rgb(230,247,255); border: 1px solid rgb(165,221,255); padding: 8px; color: #999; margin-bottom: 15px;">
                企业素材下的素材，默认全部员工可见，如果需要设置部分员工可见请至团队话术下设置
            </div>-->

      <el-row>
        <el-col :span="4"> 分组名称： </el-col>
        <el-col :span="20">
          <el-input
            size="small"
            v-model="addGroup"
            placeholder="请输入分组名称"
          ></el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4"> 可见范围： </el-col>
        <el-col :span="20"> 全部员工 </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button size="mini" type="primary" @click="group">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新建话术 -->
    <el-dialog
      :title="wordsTitle"
      :visible.sync="wordsFormVisible"
      width="40%"
      @click="handleClosr"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="wordsForm" label-width="80px">
        <el-form-item label="分组">
          <el-select
            v-model="wordsForm.conversationGroupId"
            placeholder="请选择分组"
          >
            <el-option
              v-for="item in data"
              :key="item.conversationGroupId"
              :label="item.groupName"
              :value="item.conversationGroupId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="wordsForm.conversationTitle"></el-input>
        </el-form-item>
        <!--<el-form-item label="话术">
                    <div style="display:flex;align-items: center">
                        <div style="flex: 5">
                            <el-radio-group v-model="wordsForm.conversationType">
                                <el-radio label="文本">文本</el-radio>
                                <el-radio label="文件">文件</el-radio>
                                <el-radio label="链接">链接</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <div>
                        <el-card v-if="wordsForm.conversationType === '文本'" class="taskContent">
                            <div>
                                <el-input
                                        style="width: 100%;height: 100%;"
                                        type="textarea"
                                        placeholder="请输入话术内容"
                                        v-model="wordsForm.conversationMassage"
                                        maxlength="300"
                                        show-word-limit>
                                </el-input>
                            </div>
                        </el-card>
                        <el-card v-if="wordsForm.conversationType === '文件'">
                            <el-upload
                                    action="#"
                                    list-type="picture-card"
                                    :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                    &lt;!&ndash;<span class="el-upload-list__item-actions">
                                        <span v-if="!false" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                          <i class="el-icon-delete"></i>
                                        </span>
                                    </span>&ndash;&gt;
                                </div>
                                <div slot="tip" class="el-upload__tip">20M以内</div>
                            </el-upload>
                        </el-card>

                        <el-card v-if="wordsForm.conversationType === '链接'">
                            <div style="width: 80%">
                                <el-input type="text" placeholder="输入http开头或者httpd开头的链接（必填）" v-model="wordsForm.linkAddress" maxlength="500" show-word-limit style="margin-top: 10px"></el-input>
                                <el-input type="text" placeholder="输入链接标题（必填)" v-model="wordsForm.linkTitle" maxlength="200" show-word-limit style="margin-top: 10px"></el-input>
                                <el-input type="textarea" placeholder="输入内容简介（选填)" v-model="wordsForm.linkContent" maxlength="1000" show-word-limit style="margin-top: 10px"></el-input>
                            </div>
                        </el-card>
                    </div>
                </el-form-item>-->
        <MaterialContentText ref="materialContent" :disabledAdd="true" />
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClosr">取消</el-button>
        <el-button size="mini" type="primary" @click="add">确定</el-button>
      </div>
    </el-dialog>
    <!--话术详情-->
    <div>
      <el-dialog
        :title="view"
        :visible.sync="views"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form label-width="120px" :model="monomerData" ref="editForm">
          <el-form-item label="话术标题" prop="title">
            <el-input
              size="small"
              v-model="monomerData.conversationTitle"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="monomerData.conversationType != '链接'"
            label="话术内容"
            prop="massage"
          >
            <div
              v-if="monomerData.conversationType == '文本'"
              style="
                width: 400px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ monomerData.conversationMassage }}
            </div>
            <el-image
              v-if="monomerData.conversationType == '素材'"
              :src="monomerData.conversationMassage"
              class="avatar"
            >
              <div slot="error" class="image-slot">
                <el-image
                  style="width: 100px; height: 100px"
                  v-if="monomerData.conversationType == '素材'"
                  :src="require('@/assets/img/Pdf.png')"
                  class="avatar"
                ></el-image>
              </div>
            </el-image>
          </el-form-item>
          <el-form-item
            v-if="monomerData.conversationType == '链接'"
            label="链接地址"
            prop="massage"
          >
            <el-input
              size="small"
              v-model="monomerData.linkAddress"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="monomerData.conversationType == '链接'"
            label="链接标题"
            prop="massage"
          >
            <el-input
              size="small"
              v-model="monomerData.linkTitle"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="monomerData.conversationType == '链接'"
            label="链接内容"
            prop="massage"
          >
            <el-input
              size="small"
              v-model="monomerData.linkContent"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="话术类型" prop="appendices_type">
            <el-input
              size="small"
              v-model="monomerData.conversationType"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="审核状态" prop="appendices_type">
            <el-input
              size="small"
              v-model="monomerData.conversationStatus"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">返回</el-button>
        </div>
      </el-dialog>
    </div>
    <!--编辑-->
    <el-dialog
      :title="updates"
      :visible.sync="update"
      width="40%"
      @click="handleClosr"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="monomerData" label-width="80px">
        <el-form-item label="分组">
          <el-select
            v-model="monomerData.conversationGroupId"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in data"
              :key="item.conversationGroupId"
              :label="item.groupName"
              :value="item.conversationGroupId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="monomerData.conversationTitle"></el-input>
        </el-form-item>

        <MaterialContentText ref="materialContentUp" :disabledAdd="true" />

        <!--<el-form-item>
                    <el-input type="textarea" v-model="monomerData.conversationMassage"></el-input>
                </el-form-item>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button size="mini" type="primary" @click="edit">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import MaterialContentText from "@/components/material_content_text/material_content_text";
const initData = {
  conversationType: "文本",
  conversationMassage: "",
};
export default {
  components: {
    MaterialContentText,
  },
  data() {
    return {
      showData: false,

      conversationMassage: "",

      // 选项卡
      activeName: "1",
      showIndex: "1",
      activeValue: [
        {
          label: "企业话术",
          value: "1",
        },
        {
          label: "团队话术",
          value: "2",
        },
      ],

      wordsTitle: "新建话术",

      view: "详情",
      monomerData: {},
      updates: "编辑话术",
      views: false,
      update: false,

      // 添加分组显示
      formVisible: false,
      // 新建话术显示
      wordsFormVisible: false,
      // 导入话术显示
      importFormVisible: false,

      // 添加分组信息
      addGroup: "",

      // 话术编辑信息
      wordsForm: {},

      // 筛选
      formInline: {
        page: 1,
        limit: 10,
        varLable: "",
        varName: "",
        token: localStorage.getItem("logintoken"),
      },

      // 分页参数
      pagePagination: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0,
      },

      data: [
        /*{
                        groupName : '',
                        conversationGroupId: ''
                    }*/
      ],
      defaultProps: {
        label: "groupName",
      },
      // 列表数据
      listData: [],
    };
  },

  mounted() {
    this.getGroup();
  },

  methods: {
    removeGroup(node, data) {
      let that = this;
      that.isDelete = true;
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let conversationGroupId = data.conversationGroupId;
          var params = {
            conversationGroupId: conversationGroupId,
            pageNum: this.pagePagination.currentPage,
            pageSize: this.pagePagination.pageSize,
          };
          this.$request("/conversation/getById", params, "POST").then(
            (data) => {
              if (data.data.data != null && data.data.data.length !== 0) {
                that.$message.error("请先将该分组中数据清空后再删除！");
              } else {
                that
                  .$request(
                    "/conversationGroup/delete/" + conversationGroupId,
                    "",
                    "POST"
                  )
                  .then((data) => {
                    that.$message.success("删除成功！");
                    that.showData = false;
                    that.getGroup();
                  });
              }
            }
          );
        })
        .catch(() => {});
    },
    paneEdit(tab, event) {
      this.showData = false;
      this.showIndex = tab.name;
      this.getGroup();
    },
    //===============数据处理开始=================\\
    //获取分组
    getGroup() {
      let that = this;
      this.data = [];
      const loading = this.$loading({
        lock: true,
        text: "拼命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$request("/conversationGroup/selectAll", {}, "POST").then((data) => {
        this.listData = [];
        for (let item of data.data) {
          if (
            item.conversationGroupRank === that.showIndex ||
            that.showIndex === "1"
          ) {
            item["show"] = false;
            that.data.push(item);
          }
        }
        loading.close();
      });
    },
    handleNodeClick(data) {
      this.showData = true;
      this.listData = [];
      var params = {
        conversationGroupId: data.conversationGroupId,
        pageNum: this.pagePagination.currentPage,
        pageSize: this.pagePagination.pageSize,
      };
      this.$request("/conversation/getById", params, "POST").then((data) => {
        this.listData = data.data.data;
        this.pagePagination.total = data.data.total;
      });
      this.wordsForm = {};
      this.monomerData = {};
    },
    //===============数据处理结束=================\\

    xiangqing(index, row) {
      this.views = true;
      this.monomerData = { ...row };
    },
    async bianji(index, row) {
      var contentType = 0;
      var material = {};
      this.update = true;
      // row['linkContent'] = {linkAddress:''}
      this.monomerData = { ...row };
      let res = {};
      if (row.conversationType == "素材") {
        contentType = 2;
        var materialParam = {};
        materialParam["materialAppendices"] =
          this.monomerData.conversationMassage;
        var data = await this.$request(
          "/material/getByTitle",
          materialParam,
          "POST"
        );
        res = data.data.data;
      } else if (row.conversationType == "文本") {
        contentType = 1;
      } else if (row.conversationType == "链接") {
        contentType = 3;
      }
      // todo
      var initContent = {
        contentType: contentType,
        content: this.monomerData.conversationMassage,
        material: res,
        linkContent: {
          linkAddress: this.monomerData.linkAddress,
          linkTitle: this.monomerData.linkTitle,
          content: this.monomerData.linkContent,
        },
      };
      this.$nextTick(() => {
        this.$refs.materialContentUp.loadData(initContent);
      });
    },
    shanchu(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$request(
            "/conversation/delete/" + row.conversationId,
            "",
            "DELETE"
          ).then((data) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.handleNodeClick(row);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    add() {
      if (
        this.wordsForm.conversationGroupId == null ||
        this.wordsForm.conversationGroupId == undefined ||
        this.wordsForm.conversationGroupId == ""
      ) {
        this.$message({
          message: "请选择分组",
          type: "error",
        });
        return;
      } else if (
        this.wordsForm.conversationTitle == null ||
        this.wordsForm.conversationTitle == undefined ||
        this.wordsForm.conversationTitle == ""
      ) {
        this.$message({
          message: "请输入标题",
          type: "error",
        });
        return;
      }
      var fileContent = this.$refs.materialContent.getData()[0];
      if (fileContent.contentType === 1) {
        this.wordsForm.conversationType = "文本";
        this.wordsForm.conversationMassage = fileContent.content;
      } else if (fileContent.contentType === 2) {
        this.wordsForm.conversationType = "素材";
        this.wordsForm.conversationMassage =
          fileContent.material.materialAppendices;
      } else if (fileContent.contentType === 3) {
        this.wordsForm.conversationType = "链接";
        this.wordsForm.linkAddress = fileContent.linkContent.linkAddress;
        this.wordsForm.linkTitle = fileContent.linkContent.linkTitle;
        this.wordsForm.linkContent = fileContent.linkContent.content;
      }
      this.wordsForm["conversationStatus"] = "待审核";
      this.$request("/conversation/add", this.wordsForm, "POST").then(
        (data) => {
          this.$message({
            message: "话术添加成功",
            type: "success",
          });
          this.handleNodeClick(this.wordsForm);
        }
      );
      this.handleClosr();
    },
    edit() {
      var fileContent = this.$refs.materialContentUp.getData()[0];
      if (fileContent.contentType === 1) {
        this.monomerData.conversationType = "文本";
        this.monomerData.conversationMassage = fileContent.content;
      } else if (fileContent.contentType === 2) {
        this.monomerData.conversationType = "素材";
        this.monomerData.conversationMassage =
          fileContent.material.materialAppendices;
      } else if (fileContent.contentType === 3) {
        this.monomerData.conversationType = "链接";
        this.monomerData.linkAddress = fileContent.linkContent.linkAddress;
        this.monomerData.linkTitle = fileContent.linkContent.linkTitle;
        this.monomerData.linkContent = fileContent.linkContent.content;
      }
      this.$request("/conversation/update", this.monomerData, "POST").then(
        (data) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.handleNodeClick(this.monomerData);
        }
      );
      this.close();
    },
    group() {
      if (
        this.addGroup == null ||
        this.addGroup == undefined ||
        this.addGroup == ""
      ) {
        this.$message({
          message: "请输入名称",
          type: "error",
        });
        return;
      }
      this.$request(
        "/conversationGroup/add",
        { groupName: this.addGroup, conversationGroupRank: this.showIndex },
        "POST"
      ).then((data) => {
        this.$message({
          message: "话术分组添加成功",
          type: "success",
        });
        this.getGroup();
      });
      this.close();
    },

    // 添加分组显示
    createGroup() {
      this.addGroup = "";
      this.formVisible = true;
    },
    // 添加分组关闭
    close() {
      this.formVisible = false;
      this.views = false;
      this.update = false;
    },

    // 话术编辑
    handleEdit: function (index, row) {
      this.wordsFormVisible = true;
      this.wordsTitle = "添加";
      this.wordsForm = { ...initData };
      this.$nextTick(() => {
        this.$refs.materialContent.initData();
      });
    },
    // 新建话术关闭
    handleClosr() {
      this.wordsFormVisible = false;
    },

    // 导入话术显示
    importShow() {
      this.importFormVisible = true;
    },
    // 导入话术关闭
    importClose() {
      this.importFormVisible = false;
    },
    queryDataHandle(page = 1, row = 10) {
      let that = this;
      let payload = {
        pageNum: page,
        pageSize: row,
      };
      that
        .$request("/api/conversation/getByDeptId/1_0", payload, "POST")
        .then((data) => {
          that.pagePagination["total"] = data.total;
          that.pagePagination["pageSize"] = row;
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
  },
};
</script>

<style scoped>
.el-card {
}

.el-link {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #222;
}

.el-dialog .el-row {
  margin-top: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
